<template>
	<view class="my-address">
		<view class="address_box" v-if="dataList.length!=0">
			<view class="address_item" v-for="(item,index) in dataList" :key="index" @click="selectAddress(item)">
				<view class="item_title">
					<view class="title_left">
						<text class="name">{{item.contactsPeople}}</text>
						<text>{{item.phone}}</text>
						<view class="mornen mornen_b" v-if="item.status == 2">默认</view>
						<view class="mornen" v-if="item.status == 1" @click.stop="setDefault(item)">设为默认</view>
					</view>
					<view class="title_right" @click.stop="addEditAddress('edit',item)"> 
						<image src="/static/newsImg/edit.png" mode=""></image>
						<text>编辑</text>
					 </view>
					
				</view>
				<view class="item_content">
					{{item.regionalInformation}}  {{item.locAddress}}
				</view>
			</view>
		</view>

		<view class="no_info" v-else>
			<image src="/static/my/news_no.png" mode="widthFix"></image>
			<text>暂无地址</text>
		</view>

		<view  class="address_footer" @click="addEditAddress('add')">
			<view class="address_add">
				<image src="/static/newsImg/add.png" mode=""></image>
				<text>新增地址</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAddressList,setDefault } from '@/api/api-v1-2.js'
	export default {
		data() {
			return {
				dataList: [],
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
				shopId:''
			}
		},
		onLoad(e) {
			if(e.shopId != undefined){
			    this.shopId = e.shopId
			}
			this.getDataList()
		},
		onShow() {
			let that = this
			uni.$on('updateAddressData',function(e){
				that.initialization()
			})
		},
		methods: {
			// 初始化参数
			initialization(){
				this.pageNum = 1
				this.listTotal = 0
				this.dataList = []
				this.getDataList()
			},
			// 选择地址
			selectAddress(item){
				if (this.shopId != '') {
						var data ={
							id:this.shopId,
							addressId:item.id,
							contactsPeople:item.contactsPeople,
							phone:item.phone,
							regionalInformation:item.regionalInformation,
							locAddress:item.locAddress,
						}
						uni.$emit('updateData', data)
						uni.navigateBack({
							delta: 1
						})
				}

			},
			addEditAddress(mo,item = ''){
				if(mo == 'edit'){
					uni.navigateTo({
						url:'./add-address/add-address?id='+item.id+'&shopId='+this.shopId
					})
				}else{
					uni.navigateTo({
						url:'./add-address/add-address?shopId='+this.shopId
					})
				}
			},
			async getDataList() {
				uni.showLoading({ title:'加载中' })
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				try{
					const res = await getAddressList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					var el = res.result.records			
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(el); //将数据拼接在一起
					} else {
						this.dataList = el
					}
				}
				catch{
					uni.hideLoading()
				}finally{
					setTimeout(res=>{
						uni.hideLoading()
					},4000)
				}
			
				},
				// 设为默认地址
				setDefault(item){
					setDefault(item.id).then(res=>{
						if(res.code == 200){
							this.$queue.showToast('设置成功！')
							setTimeout(()=>{
								this.pageNum = 1
								this.listTotal = 0
								this.dataList = []
								this.getDataList()
							},1000)
						}
					})
				}
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				// this.moreShop = 'noMore'
			} else {
				// this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getDataList()
			}
		}
	}
</script>

<style scoped>
	page{
		background: #F8FBFF;
	}
	.my-address{
		padding-top: 30rpx;
		padding-bottom: 80rpx;
	}
	.address_item{
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.item_title{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18rpx;
	}
	.title_left{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 30rpx;
		color: #222222;
	}
	.title_left .name{
		margin-right: 26rpx;
	}
	.mornen{
		border: 1rpx solid #B9B9B9;
		border-radius: 4rpx;
		padding: 2rpx 12rpx;
		margin-left: 22rpx;
		font-size: 24rpx;
		color: #333333;
	}
	.mornen_b{
		color: #1D46ED;
		border: 1rpx solid #1D46ED;
	}
	.title_right{
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 28rpx;
		color: #1D46ED;
	}
	.title_right image{
		width: 26rpx;
		height: 26rpx;
		margin-right: 8rpx;
	}

/* 	.title_right_on{
		border: 1rpx solid #1053FF;
		color: #1053FF;
	} */
	.item_content{
		color: #666666;
		font-size: 28rpx;
		line-height: 40rpx;
	}
	
	/*  */
	.address_footer{
/* 		position: fixed;
		bottom: 100rpx;
		width: 100%; */
		width: 100%;
		margin-top: 100rpx;
	}
	.address_add{
		width: 286rpx;
		height: 80rpx;
		border-radius: 8rpx;
		font-size: 34rpx;
		border: 2rpx solid #0B87F2;
		color: #1053FF;
        margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.address_add image{
		width: 24rpx;
		height: 24rpx;
		margin-right: 12rpx;
	}
</style>
